<template>
    <div>
      <h2>添加会员</h2>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/AdminMain/AdminHome">主页</el-breadcrumb-item>
        <el-breadcrumb-item to="/AdminMain/MemberManager">会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加会员</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card style="margin-top: 20px;">
        <el-form :model="form" :rules="rules" ref="addForm" label-width="120px">
          <el-form-item label="会员账号/卡号">
            <el-input placeholder="卡号由系统自动生成" disabled></el-input>
          </el-form-item>

          <el-form-item label="姓名" prop="memberName">
            <el-input v-model="form.memberName" placeholder="姓名"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input placeholder="初始密码123456" disabled></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="memberGender">
            <el-input v-model="form.memberGender" placeholder="性别"></el-input>
          </el-form-item>

          <el-form-item label="年龄" prop="memberAge">
            <el-input v-model="form.memberAge" placeholder="年龄" type="number"></el-input>
          </el-form-item>

          <el-form-item label="联系方式" prop="memberPhone">
            <el-input v-model="form.memberPhone" placeholder="11位手机号"></el-input>
          </el-form-item>

          <el-form-item label="身高" prop="memberHeight">
            <el-input v-model="form.memberHeight" placeholder="cm" type="number"></el-input>
          </el-form-item>

          <el-form-item label="体重" prop="memberWeight">
            <el-input v-model="form.memberWeight" placeholder="kg" type="number"></el-input>
          </el-form-item>

          <el-form-item label="购买课时" prop="cardClass">
            <el-input v-model="form.cardClass" placeholder="购买课时" type="number"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="onSubmit">添加</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>

  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  import { ElMessage } from 'element-plus'

  const router = useRouter()

  // 表单数据
  const form = ref({
    memberName: '',
    memberGender: '',
    memberAge: '',
    memberPhone: '',
    memberHeight: '',
    memberWeight: '',
    cardClass: ''
  })

  // 表单校验规则
  const rules = {
    memberName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    memberGender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
    memberAge: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
    memberPhone: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      {
        pattern: /^[1][3-9][0-9]{9}$/,
        message: '手机号格式错误',
        trigger: 'blur'
      }
    ],
    memberHeight: [{ required: true, message: '请输入身高', trigger: 'blur' }],
    memberWeight: [{ required: true, message: '请输入体重', trigger: 'blur' }],
    cardClass: [{ required: true, message: '请输入购买课时', trigger: 'blur' }]
  }

  const addForm = ref(null)

  const onSubmit = () => {
    addForm.value.validate((valid) => {
      if (valid) {
        // 提交数据
        axios.post('/server/member/add', form.value)
          .then(response => {
            if (response.data.code === 200) {
              ElMessage.success('会员添加成功')
              router.push('/AdminMain/MemberManager')
            } else {
              ElMessage.error(response.data.message || '添加失败')
            }
          })
          .catch(() => {
            ElMessage.error('请求失败，请检查服务器')
          })
      } else {
        ElMessage.warning('请检查输入的内容')
      }
    })
  }
  </script>


